<!doctype html>
    <html>
        <head>
            {% load static %}
            <meta charset="UTF-8">
            <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'home/css/style.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'home/css/Hexagon.css' %}">
            <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
            <script src="{% static 'js/bootstrap.min.js' %}"></script>
            <script src="{% static 'home/js/style.js' %}"></script>
            <title>Document</title>
        </head>
        <script type="text/javascript">
            $(function () {
                {% if error %}
                    error()
                {% endif %}
            })
        </script>
        <body>
            <div class="header">
                <ul>
                    <!--跳转到登陆界面-->
                    <li class="nav_right">
                        {% if login %}
                            {{ login }}
                        {% else %}
                            <a data-toggle="modal" data-target="#login" href="#">Login</a>
                        {% endif %}
                    </li>
                    <li>Campus Survival Guide</li>
                </ul>
            </div>

            <!-- 模态框 -->
            <div class="modal fade" id="login">
                <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        {% if error %}
                            <div class="alert alert-danger" style="margin-bottom: 0;font-size:0.8em">
                                <strong>Login Fails</strong> Incorrect user name or password
                            </div>
                        {% else %}
                            <h4 class="modal-title" style="color: black">Login</h4>
                        {% endif %}
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <form  method="post" action="{% url 'home:index' %}">
                        {% csrf_token %}
                        <div class="modal-body" style="color: black">
                                <div class="form-group">
                                    <label for="">Username</label>
                                    <input type="text" class="form-control" name="usr">
                                </div>
                                <div class="form-group">
                                    <label for="">Password</label>
                                    <input type="password" class="form-control" name="psw">
                                </div>

                        </div>
                        <!-- 模态框底部 -->
                        <div class="modal-footer" style="justify-content: center">
                        <div class="row">
                            <div>
                                <button type="submit" class="btn btn-secondary">Login</button>
                            </div>

                        </div>
                        </div>
                    </form>
                </div>
                </div>
                </div>
            </div>
            
            <table border="0" >
            <tr height="350">
                <td>
                    <div class="wrap">
                        <div class="left common"></div>
                        <div class="right common"></div>
                    </div>
                </td>
                <td width="20"></td> 
                <td>
                    <p>
                        The building of the Changping Campus of Beijing
                        University of Chemical Technology is full of many
                        highlights, not only looks good, but also has complete
                        internal functions.
                    </p>
                    <p>
                        The total construction area of the library is about
                        50,000 square meters. It is mainly used for reading
                        areas, borrowing areas, study rooms, information
                        centers, one-stop service halls and their affiliated
                        houses. More than 4,000 reading seats are arranged.
                        It has fresh functions such as open seminar room,
                        movie exhibition area, reading bar, singing bar.
                    </p>
                    <p>
                        The self-service book sterilizer brought the gospel
                        to the clean love classmates. This magical sterilizer
                        is powerful. It uses ultraviolet ray sterilization.
                        It can effectively filter the dirty things on the books
                        in 30 seconds, and clean the books inside and outside,
                        so that everyone can read them with confidence.
                    </p>
                    <p>
                        <a href="{% url 'message:index' 'library'%}" class="jump" style="font-size:16px;text-decoration:underline">
                            more…
                        </a>
                    </p>
                </td>
                <td width="60"></td>
            </tr>
            <tr height="350">
                <td>
                    <div class="wrap1">
                        <div class="left1 common1"></div>
                        <div class="right1 common1"></div>
                    </div>
                </td>
                <td width="20"></td>
                <td>
                    <p>
                        The Changping Campus of Beijing University of Chemical
                        Technology holds different events every month, whether
                        it is a subject competition or a social event, or a
                        singing, debate, programming competition, etc. Diverse
                        activities bring more fun to our campus life, where
                        students gain friendship, grow up, and learn a lot
                        of knowledge outside the classroom.
                    </p>
                    <p>
                        <a href="{% url 'message:index' 'generalActivity' %}" class="jump" style="font-size:16px;text-decoration:underline">
                            more…
                        </a>
                    </p>
                </td>
                <td width="60"></td>
            </tr>
            <tr height="350">
                <td>
                    <div class="wrap2">
                        <div class="left2 common2"></div>
                        <div class="right2 common2"></div>
                    </div>
                </td>
                <td width="20"></td>
                <td>
                    <p>
                        As of December 2017, the school has 7 post-doctoral
                        mobile stations, 7 academic degrees, first-level doctoral
                        programs, 29 academic degrees, second-level doctoral
                        programs, 19 academic degrees, first-level disciplines,
                        and 96 academic degrees. Master's degree, 5 professional
                        master's degree, 10 master's degree in engineering field.
                    </p>
                    <p>
                        In March 2018, the school added 1 academic degree first-level
                        doctoral degree, 1 academic degree first-level master's degree,
                        and 1 professional master's degree authorization category.
                    </p>
                    <p>
                        <a href="{% url 'message:index' 'generalLearn' %}" class="jump" style="font-size:16px;text-decoration:underline">
                            more…
                        </a>
                    </p>
                </td>
                <td width="60"></td>
            </tr>
            <tr height="350">
                <td>
                    <div class="wrap3">
                        <div class="left3 common3"></div>
                        <div class="right3 common3"></div>
                    </div>
                </td>
                <td width="20"></td>
                <td>
                    <p>
                        We are committed to building a new blogging platform
                        that provides students with a resource-sharing channel.
                        Students or teachers can upload their learning methods
                        here, in the form of words or links, or upload answers
                        to difficult questions and complex knowledge.
                    </p>
                    <p>
                        <a href="{% url 'blog:index' %}" class="jump" style="font-size:16px;text-decoration:underline">
                            more…
                        </a>
                    </p>
                </td>
                <td width="60"></td>
            </tr>
        </table>

        <div class="header">
            <p class="text-center" style="position: relative;top:10px;font-size:12px;color:rgba(213,212,215, 0.8)">—— ©copyright Lingxi Kuang and Yifei Zhu All Rights Reserved. ——</p>
        </div>
    </body>
</html>